<template>
    <div class="box6">
        <div class="title">
            <p>热门景区排行</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
//获取DOM节点
let charts = ref();
//组件挂载完毕
onMounted(() => {
    //展示多种类型
    let mychart = echarts.init(charts.value)
    mychart.setOption({
        //主标题
        title: {
            text: '景区排行',
            link: 'http://www.baidu.com',
            left: '50%',
            textStyle: {
                color: 'yellowgreen',
                fontSize: 20
            },
            // //子标题
            // subtext: '各大景区排行',
            // subtextStyle: {
            //     color: 'yellowgreen',
            //     fontSize: 16
            // }
        },
        tooltip: {
            show: true
        },
        //x轴
        xAxis: {
            type: 'category'
        },
        //y轴
        yAxis: {
            splitLine:true,
            axisLine: {
                show: true
            },
        },
        //布局
        grid: {
            left: 30,
            bottom: 20,
            right: 20
        },
        series: [
            {
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60, 70],
                //图形上的文本标签
                label: {
                    show: true,
                    position: 'insideTop',
                    color: 'yellowgreen'
                },
                //是否展示背景颜色
                showBackground: true,
                backgroundStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'skyblue' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'white' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                //柱条样式
                itemStyle:{
                    borderRadius:[10,10,0,0],
                    //颜色
                    color:function(data:any){
                        let arr = ['red','orange','yellowgreen','purple','cyan','hotpink','yellow']
                        return arr[data.dataIndex];
                    }
                }
            },
            {
                type:'line',
                data:[10,20,30,40,50,70,100],
                smooth:true
            }
        ]
    })
})
</script>

<style scoped lang="scss">
.box6 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin: 20px 0px;

    .title {
        margin-left: 5px;

        p {
            color: white;
            font-size: 20px;
        }
    }

    .charts {
        height: calc(100% - 30px);
    }
}
</style>